<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow='never'>
        <el-form
          :model="queryObj"
          ref="queryObj"
        >
          <div class="filter-container">
            <!-- 搜索模块 -->
            <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item
                  label="关键字"
                  prop="keyword"
                >
                  <el-input
                    v-model="queryObj.keyword"
                    size="small"
                    placeholder="根据文章标题搜索"
                    style="width: 200px"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  label="状态"
                  prop="state"
                >
                  <el-select
                    v-model="queryObj.state"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 清除、搜索按钮 -->
              <el-col :span="3">
                <el-form-item>
                  <el-button
                    size="small"
                    @click="resetForm"
                  >清除</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleSearch"
                  >搜索</el-button>
                </el-form-item>
              </el-col>
              <!-- 新增模块 -->
              <el-row
                type="flex"
                justify="end"
                style="text-align: right;"
              >
                <el-col :span="8">
                  <el-form-item>
                    <el-button
                      size="small"
                      type="success"
                      @click="dialogVisible"
                    >新增技巧</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-row>
            <!-- 提示信息模块 -->
            <el-row>
              <el-col>
                <el-alert
                  :title="`数据一共${total}条`"
                  type="info"
                  show-icon
                  :closable="false"
                  close-text
                >
                </el-alert>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <!-- 页面数据模块 -->
        <el-table
          :data="DataList"
          style="width: 100%"
          fit
        >
          <el-table-column
            label="序号"
            type="index"
            width="80px"
          >
          </el-table-column>
          <el-table-column
            label="文章标题"
            align="left"
            prop="title"
            width="400px"
          >
          </el-table-column>
          <el-table-column
            label="阅读数"
            prop="visits"
            width="300px"
          >
          </el-table-column>
          <el-table-column
            label="录入人"
            prop="username"
            width="280px"
          >
          </el-table-column>
          <el-table-column
            label="录入时间"
            prop="createTime"
            :formatter="fromTime"
            width="300px"
          >
          </el-table-column>
          <el-table-column
            label="状态"
            width="100px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            label="操作"
            width="170px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="medium "
                @click="previewArt(scope.row)"
              >预览</el-button>

              <el-button
                type="text"
                size="medium "
                @click="handleStatus(scope.row)"
              >
                {{scope.row.state===0? '启用':'禁用'}}
              </el-button>
              <el-button
                type="text"
                size="medium "
                @click="dialogVisible(scope.row)"
                :disabled="scope.row.state===1"
              >修改</el-button>
              <el-button
                type="text"
                size="medium "
                @click="removeArticle(scope.row.id)"
                :disabled="scope.row.state===1"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryObj.page"
              :page-sizes="[10,20,30, 50]"
              :page-size="queryObj.pagesize"
              :total="total"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 新增技巧弹层 -->
    <Dialog :dialogForm='queryDialog' :show-dialog.sync='showDialog' @fn="getDataList"></Dialog>
    <!-- 新增预览弹层 -->
    <!-- <Preview :dialog-preview.sync="dialogPreview"></Preview > -->

    <!-- 预览框 -->
    <el-dialog
      title="预览文章"
      :visible.sync="previewDialogVisible"
      width="43%"
    >
      <!-- 主体区域 -->
      <div class="preview-box">
        <div class="preview-title">{{ articlesInfo.title }}</div>
        <div class="preview-nav">
          <span>{{ articlesInfo.createTime }}</span>
          <span>{{ articlesInfo.username }}</span>
          <span class="el-icon-view" />
          <span>{{ articlesInfo.visits }}</span>
        </div>
        <div
          class="preview-content"
          v-html="articlesInfo.articleBody"
        />
      </div>
    </el-dialog>
    <!-- 视频区域 -->
    <div
      v-if="videoUrl"
      class="video"
    >
      <div
        class="video-ico"
        @click="closeVideo()"
      ><span class="el-icon-close" /></div>
      <div class="video-box">
        <video
          autoplay
          :src="videoUrl"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Dialog from '../components/articles-add.vue'
// import Preview from '../components/articles-preview.vue'
import { status } from '@/api/hmmm/constants'
import { list, remove, changeState } from '@/api/hmmm/articles'
import dayjs from 'dayjs'
export default {
  components: {
    Dialog

  },
  data () {
    return {

      // 点击当前预览的数据
      articlesInfo: [],
      queryDialog: {},
      // tableKey: 0,
      DataList: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10
      },
      // 表单校验
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入内容', trigger: 'blur' }]
        // videoURL: [{ message: '请输入链接', trigger: 'blur' }]
      },
      value: '',
      showDialog: false, // 默认关闭弹层
      // dialogPreview: false, // 默认关闭预览弹层
      // 预览对话的框
      previewDialogVisible: false,
      // 修改弹框的显示
      editDialogVisible: false,
      // 修改表的数据
      editArticlesForm: {
        title: '',
        articleBody: '',
        videoURL: null,
        id: ''
      },
      // 视频路径
      videoUrl: null,
      // 新增弹框
      addDialogVisible: false,
      titleInfo: {
        pageTitle: '用户',
        text: ''
      }
    }
  },
  computed: {
    status () {
      return status
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    // 请求
    async getDataList (params) {
      const res = await list(this.queryObj)
      // console.log(res)
      // 获取数据给DataList
      this.DataList = res.data.items
      this.total = res.data.counts
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      if (this.queryObj.page === 1) {
        this.getDataList(this.queryObj)
      }
    },
    // 进入下一页、上一页
    handleCurrentChange (val) {
      this.queryObj.page = val
      this.getDataList()
    },
    // 清除
    resetForm () {
      this.$refs.queryObj.resetFields()
    },
    // 搜索
    handleSearch () {
      this.queryObj.page = 1
      this.getDataList(this.queryObj)
    },
    // 删除
    removeArticle (id) {
      this.$confirm('此操作将永久删除文章' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
            .then(response => {
              this.$message.success('成功删除了文章' + '!')
              this.DataList.splice(id, 1)
              this.getDataList(this.queryObj)
            })
            .catch(response => {
              this.$message.error('删除失败')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    // 点击预览
    previewArt (row) {
      this.articlesInfo = row
      // console.log(this.articlesInfo)
      this.previewDialogVisible = true
    },
    // // 新增、编辑
    dialogVisible (row) {
      // console.log(row)
      this.queryDialog = {
        id: row.id,
        title: row.title,
        articleBody: row.articleBody,
        videoURL: row.videoURL
      }
      this.showDialog = true
      // this.id = id
      // this.$refs.DataList.getDataList(id)
    },
    // 启用、禁用
    async  handleStatus (data) {
      if (data.state === 0) {
        data.state = 1
        this.$message.success('启用成功')
      } else {
        data.state = 0
        this.$message.success('禁用成功')
      }
      await changeState(data)
      this.getDataList(this.queryObj)
    },
    // 点击表格图标显示
    closeVideo () {
      this.videoUrl = null
    },

    // 点击视频图标关闭
    video (row) {
      this.videoUrl = row
    },
    // 时间格式
    fromTime (row) {
      return dayjs(row.addDate).format('YYYY-MM-DD HH:mm:ss')
    }
  }

}
</script>

<style scoped >
.pagination {
  margin-top: 10px;
  text-align: right;
}
</style>
